<template>
  <div>
    <el-dialog title="选择用户" :visible="visible" :close-on-click-modal="false"  :before-close="dialogClose" width="680px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="id"
        @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                :reserve-selection="true"
                width="55">
        </el-table-column>
        <el-table-column
                label="ID"
                prop="id"
                width="120">
        </el-table-column>
        <el-table-column
                prop="username"
                label="姓名"
                >
        </el-table-column>
<!--        <el-table-column-->
<!--                prop="deptno"-->
<!--                label="部门"-->
<!--                show-overflow-tooltip>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Api from '@/api/Api.js'
export default {
  name: 'du-user-select',
  props:{
    visible: {
      type: Boolean
    },
    selectedArray:{
      type:Array
    },
  },
  data() {
    return {
      multipleSelection: [],
      curSelectArray: [],
      currentPage:1,
      pageSize:10,
      total:0,
      tableData: [],
    }
  },
  watch:{
    visible(newVal){
      if (newVal){
        this.fetchData();
      }
    },
    selectedArray:{
      handler(val){
        this.curSelectArray = val;
      },
      immediate:true
    }
  },
  methods: {
    dialogClose(){
      this.curSelectArray=[];
      this.multipleSelection = [];
      this.$emit('dialog-close', true);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val){
      if (val == this.pageSize) return;
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.fetchData();
    },
    handleSave() {
      this.$emit("transferUser", this.multipleSelection);
      this.dialogClose();
    },
    checkSelectState(){
      this.tableData.forEach(row => {
        let item = this.curSelectArray.find((item,index)=>item.id==row.id);
        if(item){
          this.$refs.multipleTable.toggleRowSelection(row,true);
        }
      });
    },
    fetchData(){
      Api.getUserList({pageNo: this.currentPage, pageSize: this.pageSize}).then(res => {
        if (res.success) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          return this.$message.error('获取用户列表失败')
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
